<template>
  <div>
    <div :style="cardStyle">
      <div class="m10px">
        <div class="w-full">
          <label class="my10px w-80px py10px text-left">{{ titleText }}</label>
          <input class="w-full my10px px10px py5px" style="border: 1px solid #ccc" />
        </div>
        <div>
          <div class="my10px">{{ sexText }}</div>
          <van-radio-group direction="horizontal">
            <van-radio name="1">男孩</van-radio>
            <van-radio name="2">女孩</van-radio>
          </van-radio-group>
        </div>
      </div>
    </div>
    <div class="flex justify-center items-center">
      <button class="u-button mxa" :style="buttonStyle">
        <view class="px5">{{ buttonText }}</view>
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DkAppBabyName',
  props: {
    openAd: { type: Boolean, default: true },
    titleText: { type: String, default: '输入宝宝姓' },
    sexText: { type: String, default: '输入宝宝性别' },
    buttonText: { type: String, default: '查询' },
    cardStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    buttonStyle: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      btnClick: false,
      number: 0,
      data: []
    }
  },
  mounted() {},
  methods: {}
}
</script>

<style scoped>
.u-button {
  font-size: 12px;
  box-sizing: border-box;
  margin: 0;
  color: #fff;
  border: none;
}
</style>
